<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>随机数</title>
		<style type="text/css">
			body {
				text-align: center;
			}
			 * {
			 	padding: 0;
			 	margin: 0;
			 }
			.wrap {
				width: 100%;
				height: 1000px;
				background: url(img/1.jpg);
			}
			.content {
				padding-top: 10px;
			}
			
			#Result {
				border: 3px solid #40AA53;
				margin: 0 auto;
				text-align: center;
				width: 400px;
				padding: 50px 0;
				background: #efe;
			}
			
			#Result {
				height: 50px;
				margin-top: 50px;
			}
			
			#Result1 {
				border: 3px solid #40AA53;
				margin: 0 auto;
				text-align: center;
				width: 400px;
				padding: 50px 0;
				background: #efe;
			}
			
			#Result1 {
				height: 50px;
				margin-top: 150px;
			}
			
			
			#ResultNum {
				font-size: 50px;
			}
			#ResultNum1 {
				font-size: 50px;
			}
			
			#Button {
				margin: 50px 0 0 0;
			}
			
			#Button input {
				font-size: 40px;
				padding: 0 50px;
			}
			
			.Button {
				margin: 50px 0 0 0;
			}
			
			.Button input {
				font-size: 40px;
				padding: 0 50px;
			}
			
			
			.btn {
				background-color: #40AA53;
				border: 1px solid #40AA53;
				width: 20%;
				border-radius: 2.5px;
				-moz-border-radius: 2.5px;
				-webkit-border-radius: 2.5px;
				color: #FFF;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="content">
				<h1 style="color:#fff;">幸福如你</h1>
				<!--结果-->
				<!--1-->
				<div id="Result">
					<span id="ResultNum">开始抽奖</span>
				</div>
				<!--按钮-->
				<div id="Button">
					<input type='button' class="btn" value='女' onclick='begin(this)' />
				</div>
				<!--2-->
				<div id="Result1">
					<span id="ResultNum1">开始抽奖</span>
				</div>
				<div class="Button">
					<input type='button' class="btn" value='男' onclick='begin1(this)' />
					
				</div>
				
			</div>
			<!--背景音樂-->
			<audio src="music/chou.wav" id="bg"></audio>
			<audio src="music/gundong.wav" id="gundong"></audio>
			<audio src="music/zhong.wav" id="zhong"></audio>
		</div>
	</body>
	<script src="js/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		
		// 女
		var arr = ['曹赟','徐燕','薛晓饶','丁慧','周冰辉','郝怡洁','裴莉','韩瑞娜']; 
		
		var bg = document.getElementById("bg");
		var gun = document.getElementById("gundong");
		var zhong = document.getElementById("zhong");
		var timer;
		var running = false;
		bg.play();
		function begin(trigger) {
			zhong.play();
			if(running) {
				running = false;
				clearTimeout(timer);
				$(trigger).val("开始");
				gun.pause();
				$('#ResultNum').css('color', 'red');
			} else {
				gun.play();
				running = true;
				$('#ResultNum').css('color', 'black');
				$(trigger).val("停止");
				beginTimer();
			}
		}
		
		
		// 随机数
		function Random() {
			var num = Math.floor(Math.random() * arr.length);
			$('#ResultNum')[0].innerHTML = arr[num];
		}
		
		// 开始
		function beginTimer() {
			timer = setTimeout(stop, 1);
		}
		// 停止
		function stop() {
			timer = setTimeout(stop, 1);
			Random();
			bg.pause();
			zhong.pause();
		}
		
		
		// 男
		var arr1 = ['彭斌斌','刘海涛','程前明','李连琪','刘垚芝','刘肖恒','任阳','杨洋','刘文瑞','秦亚会','刘乔松','封志锋','胡勇敢','刘帅楠','张豪','李坤','戴广辉','张志勇','李启龙','郜路知','童金生','赵盘石','刘岩岩','袁云昌','袁宇飞','张东明','陈博通','高嘉煊','姜晓明', '任叶桐', '刘开', '孟旭日','符帅东','樊子豪','李坤','杨天培','许广宇'];
		
		console.log(arr.length);
		console.log(arr1.length);

		function begin1(trigger) {
			zhong.play();
			if(running) {
				running = false;
				clearTimeout(timer);
				$(trigger).val("开始");
				gun.pause();
				$('#ResultNum1').css('color', 'red');
			} else {
				gun.play();
				running = true;
				$('#ResultNum1').css('color', 'black');
				$(trigger).val("停止");
				beginTimer1();
			}
		}
		
		// 随机数
		function Random1() {
			var num1 = Math.floor(Math.random() * arr1.length);
			$('#ResultNum1')[0].innerHTML = arr1[num1];
		}
		// 开始
		function beginTimer1() {
			timer = setTimeout(stop1, 1);
		}
		// 停止
		function stop1() {
			timer = setTimeout(stop1, 1);
			Random1();
			bg.pause();
			zhong.pause();
		}
		
		
		
	</script>
</html>